<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel文件处理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="main-container">
            <div class="header">
                <h1><i class="fas fa-file-excel me-3"></i>课程表模板转换系统</h1>
                
            </div>

            <!-- Excel文件处理 -->
            <div class="tab-content" id="mainTabContent">
                <div class="tab-pane fade show active" id="process" role="tabpanel">
                    <form id="excelProcessForm">
                        <div class="form-container">
                            <div class="form-card">
                                <div class="card">
                                    <div class="card-body">
                                        
                                        <div class="upload-area" id="uploadArea">
                                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                                            <h5>拖拽文件到此处或点击选择</h5>
                                            <p class="text-muted">支持 .xls、.xlsx、.csv 格式，最大 10MB</p>
                                            <input type="file" id="fileInput" accept=".xls,.xlsx,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv" style="display: none;">
                                            <button type="button" class="btn btn-custom">
                                                <i class="fas fa-folder-open me-2"></i>选择文件
                                            </button>
                                        </div>
                                        <div id="fileInfo" class="mt-3" style="display: none;">
                                            <div class="alert alert-info">
                                                <i class="fas fa-file-excel me-2"></i>
                                                <span id="fileName"></span>
                                                <span class="badge bg-secondary ms-2" id="fileSize"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-card">
                                <div class="card">
                                    <div class="card-body">
      
                                        
                                        <!-- 学部选择和数据处理模式 -->
                                        <div class="row mb-3">
                                            <!-- 学部选择 -->
                                            <div class="col-6">
                                                <label class="form-label">学部选择</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="schoolSection" id="primarySection" value="primary" checked>
                                                    <label class="form-check-label" for="primarySection">
                                                        <i class="fas fa-child me-1"></i>小学部
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="schoolSection" id="middleSection" value="middle">
                                                    <label class="form-check-label" for="middleSection">
                                                        <i class="fas fa-graduation-cap me-1"></i>初中部
                                                    </label>
                                                </div>
                                            </div>
                                            
                                            <!-- 数据处理模式选择 -->
                                            <div class="col-6">
                                                <label class="form-label">数据处理模式</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="dataMode" id="normalMode" value="normal">
                                                    <label class="form-check-label" for="normalMode">
                                                        <i class="fas fa-cog me-1"></i>普通模式
                                                    </label>
                                                    <div class="form-text">使用现有逻辑处理数据</div>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="dataMode" id="strictMode" value="strict" checked>
                                                    <label class="form-check-label" for="strictMode">
                                                        <i class="fas fa-shield-alt me-1"></i>严格模式
                                                    </label>
                                                    <div class="form-text">处理带@符号的严格格式数据</div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 处理模式选择（已隐藏） -->
                                        <div class="mb-3" id="processModeGroup" style="display: none;">
                                            <label class="form-label">处理模式</label>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="processMode" id="singleMode" value="single" checked>
                                                <label class="form-check-label" for="singleMode">
                                                    <i class="fas fa-file me-1"></i>单工作表处理
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="processMode" id="multiMode" value="multi">
                                                <label class="form-check-label" for="multiMode">
                                                    <i class="fas fa-files me-1"></i>多工作表处理
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <!-- 工作表名称（多工作表模式） -->
                                        <div class="mb-3" id="sheetNamesGroup" style="display: none;">
                                            <label class="form-label">工作表名称</label>
                                            <input type="text" class="form-control" id="sheetNames" placeholder="如: 一年级,二年级,三年级">
                                            <div class="form-text">多个工作表用逗号分隔，留空则处理所有工作表</div>
                                        </div>
                                        
                                        <!-- 列范围 -->
                                        <div class="row">
                                            <div class="col-6">
                                                <label class="form-label">起始列</label>
                                                <input type="text" class="form-control" id="startCol" value="C" placeholder="如: C">
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label">结束列</label>
                                                <input type="text" class="form-control" id="endCol" value="L" placeholder="如: L">
                                            </div>
                                        </div>
                                        
                                        <!-- 行范围 -->
                                        <div class="row mt-3">
                                            <div class="col-6">
                                                <label class="form-label">起始行</label>
                                                <input type="number" class="form-control" id="startRow" value="1" min="1">
                                            </div>
                                            <div class="col-6">
                                                <label class="form-label">结束行</label>
                                                <input type="number" class="form-control" id="endRow" value="40" min="1">
                                            </div>
                                        </div>
                                        
                                        <button type="submit" class="btn btn-custom w-100 mt-4">
                                            <i class="fas fa-play me-2"></i>开始处理
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 进度显示 -->
            <div class="progress-container" id="progressContainer">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-spinner fa-spin me-2"></i>处理中...</h5>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="progressBar"></div>
                        </div>
                        <p class="mt-2 mb-0" id="progressText">正在处理文件...</p>
                    </div>
                </div>
            </div>

            <!-- 结果显示 -->
            <div class="result-container" id="resultContainer">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fas fa-check-circle me-2"></i>处理结果</h5>
                        <div id="resultContent"></div>

                    </div>
                </div>
            </div>


        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>